<template>
  <div>
    <el-card class="margin_30" shadow="always" :body-style="{padding:'20px'}">
      <div slot="header">
        <span>条件查询</span>
      </div>
      <el-form ref="form" :inline="true" class="demo-form-inline">
        <el-row :gutter="20">
          <el-col :span="6" :offset="0">
            <el-form-item label="昵称">
              <el-input placeholder="昵称" style="width:100%" size="medium " />
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="0">
            <el-form-item label="用户名">
              <el-input placeholder="用户名" style="width:100%" size="medium " />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12" :offset="18">
            <el-button size="mini">重置</el-button>
            <el-button size="mini" type="primary">查询</el-button>
          </el-col>
        </el-row>

      </el-form>
    </el-card>
    <el-card class="box-card margin_30">
      <div slot="header" class="clearfix">
        <el-button type="primary" size="mini" @click="goAddUser(1)">新增</el-button>
      </div>
      <el-table
        v-loading="loading"
        :data="list"
        border
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
      >
        <el-table-column
          label="#"
          align="center"
          width="50"
          type="index"
          fixed="left"
        />
        <!-- prop需要展示的数据部分 -->
        <!-- label表头的名称 -->
        <el-table-column
          prop="username"
          label="用户名"
          align="center"
          width="200"
          fixed="left"
        />
        <el-table-column
          prop="nick_name"
          label="昵称"
          align="center"
          width="200"
        />

        <el-table-column
          label="头像"
          width="200"
          align="center"
        >
          <!-- 作用域插槽 以前叫slot-scope 最新v-slot-->
          <template slot-scope="scope">
            <img style="width:100px;height:100px;" :src="scope.row.salt" alt="">
          <!-- {{ scope.row.coverImg }} -->
          </template>
        </el-table-column>
        <el-table-column
          prop="roles"
          label="角色"
          align="center"
          width="200"
        />
        <el-table-column
          prop="create_time"
          label="添加时间"
          align="center"
          width="250"
        />
        <el-table-column label="操作" align="center" fixed="right" width="200">
          <template slot-scope="scope">
            <el-button size="mini" type="success" @click="goEdit(scope.row.id,0)">编辑</el-button>
            <el-button size="mini" type="danger" @click="del(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="paginationParams.start"
        :page-sizes="paginationParams.pageSize"
        :page-size="paginationParams.limit"
        layout="->, total, sizes, prev, pager, next, jumper"
        :total="paginationParams.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
    <!-- 弹框出现 -->
    <el-dialog title="编辑用户" :visible.sync="isShowDialog" width="40%" size="mini" @close="handleDialog">
      <el-form :model="formData" label-width="100px" size="mini">
        <el-form-item label="用户名">
          <el-input v-if="state" v-model="formData.username" placeholder="用户名" autocomplete="off" />
          <el-input v-else v-model="formData.username" placeholder="用户名" autocomplete="off" readonly />
        </el-form-item>
        <el-form-item label="用户昵称">
          <el-input v-model="formData.nickName" placeholder="用户昵称" autocomplete="off" />
        </el-form-item>
        <el-form-item v-if="state" label="密码">
          <el-input v-model="formData.password" placeholder="密码" autocomplete="off" />
        </el-form-item>
        <el-form-item label="用户头像">
          <el-upload
            ref="clearUpload"
            class="avatar-uploader"
            :action="uploadFileOss"
            :headers="token"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
          >
            <img v-if="formData.salt" style="width:50px;height:50px;border-radius:50%;" :src="formData.salt" class="avatar">
            <el-avatar v-else size="medium" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" />
          </el-upload>

        </el-form-item>
        <el-form-item label="选择角色">
          <el-select v-model="formData.roleIds" value-key="item.id" placeholder="请选择" clearable multiple>
            <el-option
              v-for="item in roleList"
              :key="item.id"
              :label="item.roleName"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="handleDialog">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { findUsersByPage, findAllRoles, saveUserRoles, removeUser, findUserDetail, updateUserRoles } from '@/api/auth/user'
import mix from '@/mixins'
export default {
  mixins: [mix],
  data() {
    return {
      state: 1,
      isShowDialog: false,
      // 是否显示加载中
      loading: false,
      formData: {
        'id': '',
        'nickName': '',
        'password': '',
        'roleIds': [],
        'salt': '',
        'username': ''
      },
      list: [],
      roleList: []
    }
  },

  created() {
    this.init()
  },

  mounted() {

  },

  methods: {
    handleAvatarSuccess(response) {
      if (response.success) {
        this.formData.salt = response.data.fileUrl
        // 清空已上传的文件列表
        this.$refs.clearUpload.clearFiles()
      } else {
        this.$message.error(response.message)
      }
    },
    // 编辑用户弹框
    goEdit(id, state) {
      this.state = state
      this.isShowDialog = true
      findAllRoles()
        .then(res => {
          this.roleList = res.data.items
        })
      findUserDetail(id)
        .then(res => {
          // console.log(res)
          this.formData = res.data.user
        })
    },
    // 保存用户信息
    save() {
      // console.log(this.state)
      if (this.state) {
        // 新增
        saveUserRoles(this.formData)
          .then(res => {
            // console.log(res)
            this.isShowDialog = false
            this.init()
          })
      } else {
        // 修改
        updateUserRoles(this.formData)
          .then(res => {
            // console.log(res)
            this.isShowDialog = false
            this.init()
          })
      }
    },
    // 新增用户弹框
    goAddUser(state) {
      this.state = state
      this.isShowDialog = true
      findAllRoles()
        .then(res => {
          this.roleList = res.data.items
        })
    },
    // 删除用户
    del(id) {
      this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 删除用户
        removeUser(id)
          .then(res => {
            // console.log(res)
            if (res.success) {
              this.init()
            } else {
              this.$message.error(res.message)
            }
          })
      }).catch(() => {
        this.$message.info('你已取消删除操作')
      })
    },

    handleDialog() {
      this.isShowDialog = false
      this.formData = this.$options.data().formData
    },

    // 获取列表
    init() {
      this.loading = true
      findUsersByPage(this.paginationParams.start, this.paginationParams.limit)
        .then(res => {
          // console.log(res)
          this.list = res.data.rows
          this.paginationParams.total = res.data.total
          this.loading = false
        })
    },
    // 每页多少条改变时触发（main.js中切换页码中文）
    handleSizeChange(e) {
      this.paginationParams.limit = e
      this.init()
    },
    // 当前页码发生改变触发
    handleCurrentChange(e) {
      this.paginationParams.start = e
      this.init()
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
